<template>
	<view class="counter">
		<span class="time-format">{{hour<10?('0'+hour):hour}}时</span><span class="time-format">{{min<10?('0'+min):min}}分</span><span class="time-format">{{sec<10?('0'+sec):sec}}秒</span>
	</view>
</template>

<script>
//  时间倒计时
export default {
	name: 'timecounter',
	props: {
		timestamp: {
			value: Number,
			default: 0
		},
		finish: {
			value: Function,
			default: ()=>{}
		}
	},
	data() {
		return {
			stamp: 0,
			hour: 0,
			min: 0,
			sec: 0,
			remain: -1
		};
	},
	methods: {
	},
	mounted (e) {
		var _that = this;
		if((new Date())<this.timestamp){
			function innercounter(){
				setTimeout(function(){
					let _t = parseInt((_that.timestamp - (new Date()).getTime())/1000);
					_that.hour = parseInt(_t/3600);
					_that.min = parseInt(_t/60%60);
					_that.sec =  parseInt(_t%60);
					(_that.hour || _that.min || _that.sec)?innercounter():_that.finish();
				},1000)
			}
			innercounter();
		}else{
			this.$emit('finish');
		}
	}
};
</script>

<style lang="scss" scoped>
// 倒计时时间格式
.counter {
	display: inline;
}
.time-format {
	font-size: 36upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 60upx;
	color: #fff;
	text-align: center;
	padding: 2upx;
	margin: 2upx;
}
</style>
